import 'package:flutter/material.dart';
import 'package:flutter_shop_template/common.dart';

class Search extends StatefulWidget {
  const Search({Key? key}) : super(key: key);

  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  final List<String> log = [
    'iphone x',
    "ipad",
    "apple",
    "mac",
    "雷蛇",
    "鼠标",
    "键盘",
    "macbook pro"
  ];

  final List<String> findLog = [
    "苹果手机13",
    "23.8寸显示器",
    "mac mini",
    "macbook air",
    "mac唇釉",
    "macbook pro",
    "明星同款卸妆水¥49/瓶"
  ];

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(),
      child: Scaffold(
        appBar: G.appbarSearch(
          context,
          TextButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text(
              '取消',
              style: Theme.of(context)
                  .textTheme
                  .bodyText1
                  ?.merge(const TextStyle(color: Colors.white70)),
            ),
          ),
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.only(bottom: 20),
                  color: Colors.white,
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.symmetric(horizontal: 20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(
                              "历史记录",
                              style: Theme.of(context).textTheme.headline2,
                            ),
                            IconButton(
                                onPressed: () {},
                                icon: const Icon(
                                  Icons.delete_outline,
                                  color: Colors.black45,
                                ))
                          ],
                        ),
                      ),
                      Wrap(
                        spacing: 8,
                        children: log
                            .map(
                              (e) => ElevatedButton(
                                style: ButtonStyle(
                                  backgroundColor:
                                      MaterialStateProperty.all(Colors.white70),
                                  shape: MaterialStateProperty.all(
                                    RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(20),
                                    ),
                                  ),
                                ),
                                onPressed: () {},
                                child: Text(
                                  e,
                                  style: Theme.of(context).textTheme.bodyText1,
                                ),
                              ),
                            )
                            .toList(),
                      ),
                    ],
                  ),
                ),
                Container(
                  padding: const EdgeInsets.only(top: 20),
                  margin: const EdgeInsets.only(top: 20),
                  color: Colors.white,
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.symmetric(horizontal: 20),
                        child: Row(
                          children: [
                            Text(
                              "搜索发现",
                              style: Theme.of(context).textTheme.headline2,
                            )
                          ],
                        ),
                      ),
                      Wrap(
                        spacing: 0,
                        runSpacing: 0,
                        children: findLog
                            .map(
                              (e) => TextButton(
                                  onPressed: () {},
                                  child: Text(
                                    e,
                                    style:
                                        Theme.of(context).textTheme.bodyText2,
                                  )),
                            )
                            .toList(),
                      )
                    ],
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 20),
                  padding: const EdgeInsets.only(left: 20, right: 20, top: 20),
                  color: Colors.white,
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Text(
                            "常用分类",
                            style: Theme.of(context).textTheme.headline2,
                          )
                        ],
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 20),
                        child: GridView.count(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          scrollDirection: Axis.vertical,
                          crossAxisCount: 4,
                          children: [
                            Icons.ac_unit,
                            Icons.baby_changing_station,
                            Icons.cabin,
                            Icons.dangerous,
                            Icons.e_mobiledata,
                            Icons.face,
                            Icons.g_mobiledata,
                            Icons.h_mobiledata
                          ]
                              .map(
                                (e) => Column(
                                  children: [
                                    Container(
                                      width: 60,
                                      height: 60,
                                      decoration: BoxDecoration(
                                        color: Colors.red.shade50,
                                        borderRadius: BorderRadius.circular(30),
                                      ),
                                      child: Icon(
                                        e,
                                        color: Colors.red,
                                      ),
                                    ),
                                    Container(
                                      margin: const EdgeInsets.only(top: 5),
                                      child: Text(
                                        "apple",
                                        style: Theme.of(context)
                                            .textTheme
                                            .bodyText1,
                                      ),
                                    )
                                  ],
                                ),
                              )
                              .toList(),
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}
